<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-06-27 19:40:48
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-08-07 02:05:22
-->
<!-- 新增好友 -->
<template>
  <div class="apption">
    <!-- 标题 -->
    <div class="pageTitle">分类管理</div>
    <div class="classOption">
      <div class="oneClass">
        <p class="title"><el-icon><Grid /></el-icon>商品一级分类管理</p>
        <div v-for="list,index of oneClassData" :key="index" class="list" :class="oneClassValue===list.id?'active':''" @click="ClassClick(list,1)">
          <span>{{ list.title }}</span>
          <span>
            <el-icon class="editIco" @click="editIcoFun(list, 1)"><EditPen /></el-icon>
            <el-icon class="deleteIco" @click="deleteIcoFun(list, 1)"><DeleteFilled /></el-icon>
            <template v-if="list.is_home===1">首页推荐中</template>
            <el-icon><ArrowRight /></el-icon>
          </span>
        </div>
        <a href="javascript:;" class="addBut" @click="classDialogVisible=true;addCLassForm.pid=0;addCLassForm.pidIndex=1;emptyFun()">+ 添加新的分类</a>
      </div>
      <div class="twoClass">
        <p class="title"><el-icon><Grid /></el-icon>商品二级分类管理</p>
        <div v-for="list,index of twoClassData" :key="index" class="list" :class="twoClassValue===list.id?'active':''" @click="ClassClick(list,2)">
          <span>{{ list.title }}</span>
          <span>
            <el-icon class="editIco" @click="editIcoFun(list, 1)"><EditPen /></el-icon>
            <el-icon class="deleteIco" @click="deleteIcoFun(list, 2)"><DeleteFilled /></el-icon>
            <template v-if="list.is_home===1">首页推荐中</template>
            <el-icon><ArrowRight /></el-icon>
          </span>
        </div>
        <a href="javascript:;" class="addBut" @click="classDialogVisible=true;addCLassForm.pid=oneClassValue;addCLassForm.pidIndex=2;emptyFun()">+ 添加新的分类</a>
      </div>
      <div class="threeClass">
        <p class="title"><el-icon><Grid /></el-icon>商品三级分类管理</p>
        <div v-for="list,index of threeClassData" :key="index" class="list" :class="threeClassValue===list.id?'active':''" @click="ClassClick(list,3)">
          <span>{{ list.title }}</span>
          <span>
            <el-icon class="editIco" @click="editIcoFun(list, 3)"><EditPen /></el-icon>
            <el-icon class="deleteIco" @click="deleteIcoFun(list, 3)"><DeleteFilled /></el-icon>
            <template v-if="list.is_home===1">首页推荐中</template>
            <el-icon><ArrowRight /></el-icon>
          </span>
        </div>
        <a href="javascript:;" class="addBut" @click="classDialogVisible=true;addCLassForm.id='';addCLassForm.pid=twoClassValue;addCLassForm.pidIndex=3;emptyFun()">+ 添加新的分类</a>
      </div>
    </div>
    <div class="queryBox">
      <div class="queryBoxLeft">
        <div class="queryItem">
          <div class="title">商品名称:</div>
          <div class="content">
            <el-input v-model="goodsprop.title" placeholder="请输入分类名称"/>
          </div>
        </div>
        <!-- <div class="queryItem">
          <div class="title">首页推荐:</div>
          <div class="content">
            <el-select v-model="goodsprop.state" clearable placeholder="请选择">
              <el-option
                label="是"
                :value="1"/>
              <el-option
                label="否"
                :value="0"/>
            </el-select>
          </div>
        </div> -->
        <!-- <div class="queryItem">
          <div class="title">任务执行时间:</div>
          <div class="content">
            <el-date-picker
              v-model="prop.time"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
              style="width: 280px;"
            />
          </div>
        </div> -->
      </div>
      <div class="queryBoxRight">
        <el-button type="primary" @click="initShoping">查询</el-button>
        <el-button type="success" @click="resetClick">重置</el-button>
      </div>
    </div>
    <div class="tableClass">
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="title" label="商品名称" />
        <el-table-column prop="cate_title" label="商品分类" />
        <el-table-column label="商品图片 ">
          <template #default="scope">
            <el-image :src="scope.row.logo" style="width:45px;height:45px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品状态 ">
          <template #default="scope">
            <template v-if="scope.row.status===2">
              上架中
            </template>
            <template v-if="scope.row.status===1">
              下架
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" />
        <el-table-column prop="total_stock" label="数量" />
        <el-table-column prop="discount_price" label="销售价格" />
        <el-table-column label="创建时间 ">
          <template #default="scope">
            {{ scope.row.update_time }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="timedPagination">
      <el-pagination
        v-model:current-page="goodsprop.page"
        v-model:page-size="goodsprop.limit"
        :total="goodsprop.total"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 新增or编辑分类 -->
    <el-dialog
      v-model="classDialogVisible"
      width="528"
      :before-close="dialogClose"
      title="添加新的分类"
      top="3vh"
    >
      <div class="content">
        
        <el-form :model="addCLassForm" label-width="auto">
          <el-form-item v-if="addCLassForm.pid" label="上级分类:">
            {{ addCLassForm.pid }}
          </el-form-item>
          <el-form-item label="分类名称:">
            <el-input v-model="addCLassForm.title" />
          </el-form-item>
          <el-form-item label="分类图片:">
            <elUploadOptionMultiple v-if="classDialogVisible" :fileUploadList="addCLassForm.imageArr" :limit="1" @getImagesFun="getImagesFun" />
          </el-form-item>
          <el-form-item label="排序:">
            <el-input v-model="addCLassForm.sort" />
          </el-form-item>
          <el-form-item label="是否首页推荐:">
            <el-checkbox v-model="addCLassForm.is_home" :true-value="1" :false-value="0" size="large" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="success" @click="addClassFun">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { computed,ref,onMounted } from 'vue'
import { useChatInfoStore, useJobIDStore } from '@/store/index.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi } from "@/api/api.js"
import elUploadOptionMultiple from '@/components/elUploadOptionMultiple.vue';
import moment from 'moment'
let loading = ref(false)
let tableData = ref([])
// let chatInfo = computed(() => {
//   return useChatInfoStore().chatInfo
// })
let oneClassData=ref([])
let twoClassData=ref([])
let threeClassData=ref([])
let oneClassValue=ref('')
let twoClassValue=ref('')
let threeClassValue=ref('')
function init() { // init初始化执行1
  loading.value = true
  postApi('/mall.cate/index', {
    pid: 0
  }).then(res => {
    if(res.code === 1){
      loading.value = false
      oneClassData.value = res.data
      if(res.data.length>0){
        oneClassValue.value = res.data[0].id
        initTwo()
      }
    }
  }).catch(err => {
    loading.value = false
  })
}
function initTwo() { // init初始化执行2
  loading.value = true
  postApi('/mall.cate/index', {
    pid: oneClassValue.value
  }).then(res => {
    if(res.code === 1){
      loading.value = false
      twoClassData.value = res.data
      if(res.data.length>0){
        // twoClassValue.value = res.data[0].id
        // initThree()
      }
    }
  }).catch(err => {
    loading.value = false
  })
}
function initThree() { // init初始化执行3
  loading.value = true
  postApi('/mall.cate/index', {
    pid: twoClassValue.value
  }).then(res => {
    if(res.code === 1){
      loading.value = false
      threeClassData.value = res.data
    }
  }).catch(err => {
    loading.value = false
  })
}
// 分类管理
let classDialogVisible = ref(false)
let addCLassForm = ref({
  id: '',
  pid: '',
  pidName: '',
  pidIndex: '',
  title: '',
  is_home: 0,
  image: '',
  sort: ''
})

// 上传图片回传函数
function getImagesFun(row) {
  console.log('1111111111111111')
  console.log(row)
  addCLassForm.value.image = row[0].url
}
// 新增分类
function emptyFun(params) {
  addCLassForm.value.pidName = ''
  addCLassForm.value.title = ''
  addCLassForm.value.is_home = 0
  addCLassForm.value.image = ''
  addCLassForm.value.sort = ''
}
function addClassFun() {
  loading.value = true
  if(addCLassForm.value.id){
    let obj = {
      id: addCLassForm.value.id,
      pid: addCLassForm.value.pid,
      title: addCLassForm.value.title,
      is_home: addCLassForm.value.is_home,
      image: addCLassForm.value.image,
      sort: addCLassForm.value.sort
    }
    postApi('/mall.cate/edit', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        if(addCLassForm.value.pidIndex==1){
          init()
        }
        if(addCLassForm.value.pidIndex==2){
          initTwo()
        }
        if(addCLassForm.value.pidIndex==3){
          initThree()
        }
        loading.value = false
        classDialogVisible.value = false
        addCLassForm.value = {
          pid: '',
          pidName: '',
          pidIndex: '',
          title: '',
          is_home: 0,
          image: '',
          sort: ''
        }
      }
    }).catch(err => {
      loading.value = false
    })
  }else{
    let obj = {
      pid: addCLassForm.value.pid,
      title: addCLassForm.value.title,
      is_home: addCLassForm.value.is_home,
      image: addCLassForm.value.image,
      sort: addCLassForm.value.sort
    }
    postApi('/mall.cate/add', obj).then(res => {
      if(res.code === 1){
        ElMessage({message: "操作成功",type: 'success'})
        if(addCLassForm.value.pidIndex==1){
          init()
        }
        if(addCLassForm.value.pidIndex==2){
          initTwo()
        }
        if(addCLassForm.value.pidIndex==3){
          initThree()
        }
        loading.value = false
        classDialogVisible.value = false
        addCLassForm.value = {
          pid: '',
          pidName: '',
          pidIndex: '',
          title: '',
          is_home: 0,
          image: '',
          sort: ''
        }
      }
    }).catch(err => {
      loading.value = false
    })
  }
}
// 编辑分类
function editIcoFun(row, pidIndex) {
  classDialogVisible.value = true
  addCLassForm.value = {
    id: row.id,
    pid: row.pid,
    pidName: addCLassForm.value.pidName,
    pidIndex: pidIndex,
    title: row.title,
    is_home: row.is_home,
    image: row.image,
    imageArr: [{url:row.image}],
    sort: row.sort
  }
  console.log(row)
}
// 删除分类
function deleteIcoFun(row, index) {
  ElMessageBox.confirm('确定要删除该条数据吗？','删除').then(() => {
    postApi('/mall.cate/delete', { id:row.id }).then(res => {
      if(res.code === 1){
        ElMessage({
          message: "操作成功",
          type: 'success'
        })
        if(index==1){
          init()
        }
        if(index==2){
          initTwo()
        }
        if(index==3){
          initThree()
        }
      }
    })
  })
}
function ClassClick(row, index) {
  if(index===1){
    oneClassValue.value = row.id
    initTwo()
  }
  if(index===2){
    twoClassValue.value = row.id
    initThree()
  }
  if(index===3){
    threeClassValue.value = row.id
  }
}
// 查询商品
let goodsprop = ref({
  page: 1,
  limit: 10,
  title: '',
  cate_id: oneClassValue.value,
  cate_two: twoClassValue.value,
  cate_three: threeClassValue.value,
  status: '',
  total: 0
})
function initShoping() {
  loading.value = true
  postApi('/mall.goods/index', {
    page: goodsprop.value.page,
    limit: goodsprop.value.limit,
    title: goodsprop.value.title,
    cate_id: oneClassValue.value,
    cate_two: twoClassValue.value,
    cate_three: threeClassValue.value,
    status: goodsprop.value.status
  }).then(res => {
    loading.value = false
    tableData.value = res.data
    twoClassValue.value.total = res.count
  }).catch(err => {
    loading.value = false
  })
}
function resetClick() { // 重置
  oneClassValue.value=''
  twoClassValue.value=''
  threeClassValue.value=''
  goodsprop.value = {
    page: 1,
    limit: 10,
    total: 0,
    title: '',
    cate_id: '',
    cate_two: '',
    cate_three: '',
    status: ''
  }
  initShoping()
}
function handleCurrentChange(val){
  adminInitProp.value.page = val
  adminInit()
}
// 关闭弹框
function dialogClose(params) {
  classDialogVisible.value = false
}

onMounted(()=>{
  init()
  initShoping()
})
</script>

<style lang="scss" scoped>
.apption{
  padding: 20px;
  .classOption{
    display: flex;
    justify-content: space-between;
    .oneClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .twoClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .threeClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .list{
      cursor: pointer;
      padding: 0 13px;
      margin-bottom: 8px;
      height: 36px;
      background: #F6F6F6;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-icon{
        margin-left: 4px;
      }
      .deleteIco{
        cursor: pointer;
        margin-right: 4px;
      }
    }
    .active{
      background: #000000;
      border-radius: 4px 4px 4px 4px;
      color: #FFFFFF;
      .el-icon{
        color: #FFFFFF;
      }
      .deleteIco{
        color: #FFFFFF;
      }
    }
    .title{
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      color: #BA9763;
      .el-icon{
        width: 36px;
        height: 36px;
        background: #F6F6F6;
        border-radius: 5px 5px 5px 5px;
        color: #666;
        font-size: 16px;
        margin-right: 4px;
      }
    }
    .addBut{
      height: 36px;
      line-height: 36px;
      text-align: center;
      display: block;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #F6F6F6;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
    }
  }
  .pageTitle{
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
  .queryBox{
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    .queryBoxLeft{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .queryItem{
        display: flex;
        align-items: center;
        margin-right: 20px;
        .title{
          font-weight: 400;
          font-size: 14px;
          color: rgb(16, 16, 16);
          margin-right: 10px;
        }
        .content{
          min-width: 194px;
          background-color: rgb(245, 247, 255);
          border-radius: 4px;
          ::v-deep(.el-select__wrapper){
            background-color: transparent;
            box-shadow: 0 0 0;
          }
          ::v-deep(.el-input__wrapper){
            background-color: transparent;
            box-shadow: 0 0 0;
            .el-input__inner{
              text-align: left;
            }
          }

        }
      }
    }
  }
  .tableClass{
    margin-bottom: 20px;
  }
}
</style>
